<template>
  <div>
    <Page>
      <div class="contBox h-full">
        <BaseForm>
          <template #coordinate>
            <div class="flex w-full">
              <a-input
                placeholder="请选择小区所在位置"
                :disabled="true"
                :value="coordinateStr"
              />
              <Button class="ml-3" type="primary" @click="openMap"
                >点击选择</Button
              >
            </div>
          </template>
          <FormItem>
            <Button class="submitBtn" type="primary" @click="onSubmit"
              >提交</Button
            >
          </FormItem>
        </BaseForm>
      </div>
    </Page>
    <MapModel
      ref="mapModelRef"
      v-model="coordinateStr"
      @changeType="isHandlePoint = false"
    />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'EditDrawer',
});
import { computed, onMounted, ref, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { formSchema } from './data/options';
import { queryGet, queryUpdate } from './data/api';
import { message, FormItem, Button } from 'ant-design-vue';
import { useThrottleFn } from '@vueuse/core';
import { useStoreStore } from '#/store';
import MapModel from './components/mapModel.vue';

const mapModelRef = ref<any>('');
const coordinateStr = ref<any>('');
const isHandlePoint = ref<any>(false);

onMounted(() => {
  getData();
});

const getData = async () => {
  let res: any = await queryGet({ storeId: useStoreStore().getStoreId() });
  console.log(res);
  const { lat, lng } = res.data;
  const val = `${lat},${lng}`;
  coordinateStr.value = val;
  res.data.coordinate = val;
  formApi.setValues({ ...res.data });
};

// 抽屉提交
const onSubmit = useThrottleFn(async () => {
  const { valid } = await formApi.validate();
  if (!valid) return;
  let values = await formApi.getValues();
  // console.log(values);
  let res: any = await queryUpdate({ ...values });
  message.success(res.message);
}, 1000);

// 表单
const [BaseForm, formApi] = useVbenForm({
  showDefaultActions: false,
  wrapperClass: 'pl-40 pr-40 pt-10 pb-10',
  schema: formSchema,
  handleSubmit: onSubmit,
  commonConfig: {
    labelWidth: 140,
    componentProps: {
      class: 'w-full',
    },
  },
});

// 打开地图
const openMap = () => {
  console.log('openMap');
  mapModelRef.value?.open(coordinateStr.value);
  isHandlePoint.value = true;
};
</script>

<style lang="scss" scoped>
.submitBtn {
  margin-left: 130px;
  padding: 0 25px;
  margin-top: 40px;
}
</style>
